import { AttrEditor, AnimateSetting, EventAction, FormRule, PageSetting } from './components/index'
import { mapGetters, mapState } from 'vuex'
import './index.scss'
import { createNamespace } from '@utils/index'


const [bem] = createNamespace('panel-right');

export default {
    name: 'PanelRight',
    data() {
        return {
            isOpen: true,
            activeName: 'attr'
        }
    },
    computed: {
        ...mapGetters('editor', ['focusBlock']),
    },
    render() {
        return (
                <div class={bem({ 'isOpen': this.isOpen })}>
                    <div class={bem('float-btn')} onClick={() => (this.isOpen = !this.isOpen)}>
                        <i class={`el-icon-d-arrow-${this.isOpen ? 'right' : 'left'}`}></i>
                    </div>
                    <div class={bem('attrs')}>
                        <ElTabs
                            v-model={this.activeName}
                            type="border-card"
                            stretch={true}
                            class={bem('attrs__tabs')}
                        >
                            <ElTabPane label="属性" name="attr">
                                <AttrEditor />
                            </ElTabPane>
                            <ElTabPane label="动画" name="animate" lazy>
                                <AnimateSetting />
                            </ElTabPane>
                            <ElTabPane label="事件" name="events">
                                <EventAction />
                            </ElTabPane>
                            {this.focusBlock?.label?.startsWith('表单') ? (
                                <ElTabPane label="规则" name="form-rule" lazy>
                                    <FormRule />
                                </ElTabPane>
                            ) : null}
                            <ElTabPane label="页面设置" name="page-setting">
                                <PageSetting />
                            </ElTabPane>
                        </ElTabs>
                    </div>
                </div>
        )
    }
}